<template>
    <div>
        <el-form ref="updatePassswordForm" :model="updatePassswordForm" class="loginContainer">
            <h3 class="loginTitle">
                修改密码
            </h3>
            <el-form-item prop="password">
                <el-input type="password" v-model="updatePassswordForm.oldPassword" placeholder="请输入旧密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="updatePassswordForm.newPassword" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="updatePassswordForm.confirmPassword" placeholder="请再次输入新密码">
                </el-input>
            </el-form-item>
            <el-button type="primary" style="width:100%" @click="submitUpdate">提交修改</el-button>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            updatePassswordForm: {
                oldPassword: "",
                newPassword: "",
                confirmPassword: ""
            },

        }
    },
    methods: {
        submitUpdate() {
            let that = this;
            if (that.updatePassswordForm.oldPassword.length < 5 || that.updatePassswordForm.oldPassword.length > 64) {
                that.$message.error('密码长度在 5 到 16 个字符');
                return;
            }
            if (that.updatePassswordForm.newPassword.length < 5 || that.updatePassswordForm.newPassword.length > 64) {
                that.$message.error('密码长度在 5 到 16 个字符');
                return;
            }
            if (that.updatePassswordForm.newPassword != that.updatePassswordForm.confirmPassword) {
                that.$message.error('确认密码与密码不一致！');
                return;
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/user/change_password',
                data: {
                    o_password: that.updatePassswordForm.oldPassword,
                    password: that.updatePassswordForm.newPassword
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.error) {
                        that.$message.error("密码修改失败");
                        window.location.reload();
                        return;
                    }
                    that.$store.commit('logout');
                    that.$store.commit('removeToken');
                    that.$router.push({ path: '/login' }, () => { }, () => { });
                    window.parent.location.reload();
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行

                })
        }
    },
    created: function () {
        if (!window.localStorage.getItem("token")) {
            this.$router.push({ path: '/login' }, () => { }, () => { });
            return;
        }
    }
}
</script>
<style lang="less" scoped>
.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin-left: 800px;
    margin-top: -150px;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: aliceblue;
    border: 1px solid blueviolet;
    box-shadow: 0 0 25px #f885ff;
}

.loginTitle {
    margin: 0px auto 48px auto;
    text-align: center;
    font-size: 40px;
}


body {
    background-image: url("../assets/background.jpg");
    background-size: 100%;
}
</style>